<template>
  <div class="mecell" @click="clickCell">
    <div class="mecell-left-text" v-if="leftText">{{leftText}}</div>
    <div class="mecell-right-text" v-if="rightText">{{rightText}}</div>
    <div class="mecell-avatar" v-if="avatarShow"><img :src="avatarUrl"></div>
    <i class="mecell-icon icon-iconfont-platform-entrance" v-if="iconShow"></i> 
  </div>
</template>
<script>
export default {
  props:{
    leftText:{ type: String, default: "" }, //左侧文字文本
    rightText:{ type: String, default: "" }, //右侧文字文本
    avatarShow:{ type: Boolean, default: false }, //是否显示头像
    avatarUrl:{ type: String, default: require("../../static/images/touxiang.png") }, //是否显示头像
    iconShow:{ type: Boolean, default: true }, //是否显示图标
    clickCell: { type: Function, default: () => {} } //点击事件
  },
  mounted(){
  }
};
</script>

<style lang="stylus" scoped>
  .mecell
    width 100%
    height 90rpx
    background-color #fff
    margin-bottom 10rpx
    font-size 14px
    display flex
    justify-content space-between
    align-items center
    padding 0 40rpx
    .mecell-left-text
      font-weight 500
    .mecell-icon
      color #ccc
      transform:rotate(-90deg);
    .mecell-avatar
      width 70rpx
      height 70rpx
      display flex
      justify-content center
      align-items center
      background-color #dbdbdb
      img
        width 70rpx
        height 70rpx
</style>
